<template>
  <div style="width: 1200px;margin: 0 auto;">
    <div>
      <el-form :model="form" label-width="80px">
        <!-- 城市选框 -->
        <el-form-item label="城市：">
          <el-select v-model="form.city" placeholder="请选择城市" style="width: 500px;">
            <el-option label="北京" value="beijing"></el-option>
            <el-option label="上海" value="shanghai"></el-option>
          </el-select>
        </el-form-item>
        <!-- 城市区域选框 -->
        <el-form-item v-if="form.city === 'beijing'" label="区域：">
          <el-checkbox-group v-model="form.area">
            <el-checkbox v-for="area in areas" :key="area.value" :label="area.label" :value="area.value">
              {{ area.label }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <!-- 价格选框 -->
        <el-form-item label="价格范围:">
          <el-select v-model="form.price" placeholder="请选择价格范围" style="width: 500px;">
            <el-option label="不限" value=""></el-option>
            <el-option label="1000元以下" value="0-1000"></el-option>
            <el-option label="1000-2000元" value="1000-2000"></el-option>
            <el-option label="2000-3000元" value="2000-3000"></el-option>
          </el-select>
        </el-form-item>
        <!-- 房型选框 -->
        <el-form-item label="房型：">
          <el-checkbox-group v-model="form.types">
            <el-checkbox label="1居室"></el-checkbox>
            <el-checkbox label="2居室"></el-checkbox>
            <el-checkbox label="3居室"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 租期选框 -->
        <el-form-item label="租期：">
          <el-checkbox-group v-model="form.lease">
            <el-checkbox label="月租"></el-checkbox>
            <el-checkbox label="年租"></el-checkbox>
            <el-checkbox label="一个月起租"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 方式选框 -->
        <el-form-item label="方式：">
          <el-checkbox-group v-model="form.mode">
            <el-checkbox label="整租"></el-checkbox>
            <el-checkbox label="合租"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>

        <!-- 朝向选框 -->
        <el-form-item label="朝向：">
          <el-checkbox-group v-model="form.orientation">
            <el-checkbox label="朝南"></el-checkbox>
            <el-checkbox label="朝北"></el-checkbox>
            <el-checkbox label="朝西"></el-checkbox>
            <el-checkbox label="朝东"></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-button type="primary" @click="submitForm" style="margin-bottom: 10px">搜索</el-button>
      </el-form>
    </div>

    <el-row :gutter="10">
      <el-col :span="20">
        <el-card style="height: 170px;">
          <el-col :span="4"><img src="logo.png" style="width:160px;height: 122px;float: left;margin-right: 20px">
          </el-col>
          <el-col :span="20">
            <a href="" style="font-size: 20px;font-weight: 700;color: #101d37;float: left">{{ detail.title }}</a>
            <h1 style="font-size: 24px;float:right;color: #fa5741;margin: 0">{{ detail.price }} 元/月</h1>
            <br><br> <span style="float: left;font-size: 14px;color: #9399a5;font-weight: 700;">精选 &nbsp;<i>/</i>
            <a href="" style="color:#9399a5;">&nbsp; 朝阳</a>-
            <a href="" style="color:#9399a5;">双桥</a>-
            <a href="" style="color:#9399a5;">管庄新村 &nbsp;</a> <i>/</i>&nbsp; 18.00㎡ &nbsp;<i>/</i> &nbsp;北 &nbsp;<i>/</i> &nbsp;3居室</span><br><br>
            <div class="tags"><i v-for="tag in tags">{{ tag }}</i><br><br></div>
            <span style="float: left;color: #9399a5;font-size: 14px;">京久公寓 &nbsp;<el-icon><Clock/></el-icon> 今天维护</span>
          </el-col>
        </el-card>
      </el-col>
      <el-col :span="4">
        <h2>热推房源</h2>
        <br>
        <router-link to="">
          <img src="logo.png" style="width:160px;height: 122px;">
          <p style="margin-top: 0;margin-bottom: 2px;color: #101d37">整租 · 肖家河新村东区</p>
          <p style="margin-top: 0;margin-bottom: 2px;color: #9399a5;">海淀/1室1厅1卫</p>
          <p style="margin-top: 0;margin-bottom: 2px;color: #fa5741;font-size: 18px;">7000元/月</p>
        </router-link>
      </el-col>
    </el-row>
  </div>


</template>

<script setup>

import {ref} from "vue";
import {ElMessage} from "element-plus";

const tags = ref(["新上", "公寓", "近地铁", "精装", "集中供暖", "随时看房"])
const detail = ref({
  title: '合租·杨闸新村 4居室 东卧 ',
  price: '7000',
});
const form = ref({
  city: '',
  area: [],
  price: '',
  types: [],
  lease: [],
  orientation: [],
  mode: []
});

const areas = [
  {label: '东城', value: 'dongcheng'},
  {label: '西城', value: 'xicheng'},
  {label: '朝阳', value: 'chaoyang'},
  {label: '海淀', value: 'haidian'},
  {label: '丰台', value: 'fengtai'},
  {label: '石景山', value: 'shijingshan'},
  {label: '通州', value: 'tongzhou'},
  {label: '昌平', value: 'changping'},
  {label: '大兴', value: 'daxing'},
  {label: '亦庄开发区', value: 'yizhuangkaifaqu'},
  {label: '顺义', value: 'shunyi'},
  {label: '房山', value: 'fangshan'},
  {label: '门头沟', value: 'mentougou'},
  {label: '平谷', value: 'pinggu'},
  {label: '怀柔', value: 'huairou'},
  {label: '密云', value: 'miyun'},
  {label: '延庆', value: 'yanqing'}
];

const submitForm = () => {
  // 在这里实现根据选择的筛选条件来更新房源列表的逻辑
  console.log('城市：', form.value.city);
  console.log('区域：', form.value.area);
  console.log('价格范围：', form.value.price);
  console.log('房型：', form.value.types);
  console.log('朝向：', form.value.orientation);
};
</script>

<style scoped>
a {
  text-decoration: none; /*去掉超链接的下划线*/
}

.tags i {
  float: left;
  display: inline-block;
  font-family: HiraginoSansGB-W3;
  height: 24px;
  line-height: 24px;
  font-size: 12px;
  text-align: center;
  color: #849aae;
  background-color: rgba(132, 154, 174, .1);
  border-radius: 2px;
  margin-right: 6px;
  padding: 0 11px;
  font-style: normal;
}
</style>